<template>
    <div class="nav-bar">
        <div class="default">
          <slot name="default"></slot>
        </div>
        <div class="search">
          <slot name="right"></slot>
        </div>
    </div>
  </template>
  
  <script lang="ts" setup></script>
  
  <style lang="less" scoped>
  .nav-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .default {
        width: 100%;
        display: flex;
        align-items: center;
        :deep(.el-form-item){
          margin: 5px 10px;
        }
        :deep(.el-form-item){
          margin: 5px 10px;
        }
        :deep(.el-form-item--default){
          margin: 5px 10px;
        }
        :deep(.el-select__wrapper){
          width: 198px;
        }
        flex-wrap: wrap;
      }
      .search{
        display: flex;
        align-items: center;
      }
  }
  
  @keyframes show {
    0%{
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
  </style>